<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="cookie.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <button class="btn1">点击存cookie</button>
    <button class="btn2">点击获取cookie</button>
    <button class="btn3">点击删除cookie</button>
    <script type="text/javascript">
      // cookie 的特点：1.可以跨页面传参（同一域名和同一地址下）2.cookie数据量不大4k 最多50个 3.持久化保存 （只要不过期，不主动删除）
      // 4.cookie可以被禁用 （1.服务端设置 返还头 http-only：true 2.用户可以通过浏览器关闭cookie）
      // 5.cookie会自动携带在请求头部 （cookie会占用网络资源）；
      // 1.跨页面传参 ；
      document.querySelector(".btn1").onclick = function () {
        setCookie("name", "zhangsan");
        setCookie("age", 20);
      };
      document.querySelector(".btn2").onclick = function () {
        console.log(getCookie("name"));
      };

      document.querySelector(".btn3").onclick = function () {
        delCookie("name");
      };
    </script>
  </body>
</html>
